<footer th:if="${theme.config.footer.style == 'style_1'}" class="mt-10 bg-white py-8 dark:bg-slate-800">
  <div class="container mx-auto sm:flex sm:items-center sm:justify-between">
    <a href="/" class="mb-4 flex items-center justify-center sm:mb-0 sm:justify-start">
      <img
        th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
        th:src="${theme.config.footer.logo ?: site.logo}"
        class="mr-3 h-8 w-8"
        th:alt="${site.title}"
      />
      <span class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50" th:text="${site.title}">
      </span>
    </a>
    <th:block th:if="${not #strings.isEmpty(theme.config.footer.menu)}">
      <ul
        th:with="menu = ${menuFinder.getByName(theme.config.footer.menu)}"
        class="mb-6 flex flex-wrap items-center justify-center text-sm text-gray-500 dark:text-slate-200 sm:mb-0 sm:justify-start"
      >
        <li th:each="menuItem : ${menu.menuItems}">
          <a
            th:href="@{${menuItem.status.href}}"
            class="mr-4 transition-all hover:text-gray-900 hover:underline dark:hover:text-white md:mr-6"
            th:text="${menuItem.status.displayName}"
          ></a>
        </li>
      </ul>
    </th:block>
  </div>
  <hr class="my-6 border-gray-100 dark:border-slate-700 sm:mx-auto lg:my-8" />
  <span class="container mx-auto block text-center text-sm text-gray-500">
    <a
      href="https://beian.miit.gov.cn/"
      class="hover:underline"
      target="_blank"
      th:href="${theme.config.beian.icp_link}"
      th:text="${theme.config.beian.icp_text}"
    ></a>
  </span>
  <span class="container mx-auto block text-center text-sm text-gray-500 dark:text-slate-300">
    ©
    <th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
    <a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. Powered by
    <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
  </span>
  <span class="container mx-auto block text-center text-sm text-gray-500 dark:text-slate-300">
    <halo:footer />
  </span>
</footer>

<footer th:if="${theme.config.footer.style == 'style_2'}" class="mt-10 bg-white py-8 dark:bg-slate-800">
  <div class="container mx-auto md:flex md:justify-between md:gap-10">
    <div class="mb-6 max-w-full md:mb-0 md:max-w-md">
      <a href="/" class="mb-6 flex items-center">
        <img
          th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
          th:src="${theme.config.footer.logo ?: site.logo}"
          class="mr-3 h-8"
          th:alt="${site.title}"
        />
        <span
          class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50"
          th:text="${site.title}"
        ></span>
      </a>
      <span
        th:if="${not #strings.isEmpty(theme.config.footer.slogan)}"
        class="text-sm font-light text-gray-600 dark:text-slate-200"
        th:text="${theme.config.footer.slogan}"
      >
      </span>
    </div>
    <div
      th:if="${not #lists.isEmpty(theme.config.footer.menus)}"
      class="grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12"
    >
      <th:block th:each="menuName : ${theme.config.footer.menus}">
        <div th:with="menu = ${menuFinder.getByName(menuName.name)}">
          <h2
            class="mb-6 text-sm font-semibold text-gray-900 dark:text-slate-50"
            th:text="${menu.spec.displayName}"
          ></h2>
          <ul th:with="menuItems = ${menu.menuItems}" class="text-sm text-gray-500 dark:text-slate-200">
            <li th:each="menuItem : ${menuItems}" class="mb-4">
              <a
                th:href="@{${menuItem.status.href}}"
                class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
                th:text="${menuItem.spec.displayName}"
              ></a>
            </li>
          </ul>
        </div>
      </th:block>
    </div>
  </div>
  <hr class="my-6 border-gray-200 dark:border-slate-700 sm:mx-auto lg:my-8" />
  <div class="container mx-auto sm:flex sm:items-center sm:justify-between">
    <span class="text-sm text-gray-500 dark:text-slate-300 sm:text-center">
      ©
      <th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
      <a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. Powered by
      <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
    </span>
    <div
      th:with="social_medias = ${theme.config.footer.social_media}"
      class="mt-4 flex space-x-6 sm:mt-0 sm:justify-center"
    >
      <a
        th:each="social_media : ${social_medias}"
        th:href="${social_media.url}"
        class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
        th:title="${social_media.name}"
      >
        <div th:classappend="${social_media.icon}" class="h-5 w-5"></div>
      </a>
    </div>
  </div>
  <div class="container mx-auto sm:flex sm:items-center sm:justify-between">
    <span class="text-sm text-gray-500 dark:text-slate-300 sm:text-center">
      <halo:footer />
    </span>
  </div>
</footer>
